<template>
  <div>
     <div class="bk" v-for="(sj,sy) in dx" :key="sy" :class="{act:sj.zjjdbj&&sy==0}">
            <div class="fud">
               <div>
                <img class="tp" :src="sj.info.avatar" />
               </div>
               <div>
                <div style="font-size: 14px">
                    {{sj.info.nickname}}
                </div>
                <div class="nr">
                    {{sj.content}}
                </div>
                <div>
                    <span style="font-size:14px;color: rgb(230,230,230);width: 55px;">{{sj.create_time}}</span>
                    <span style="font-size:14px;" v-show="!hfyc" class="reqly" @click="djhf(sj,sy)"> 
                              <!-- 子传父 把点击那个就是那个的所有数据都传递过去 还有索引下面是方法methods -->
                        {{sj.reply_num}}回复
                    </span>
                </div>
               </div>
               <div v-show="!hfyc" @click="dj(sj._id,sj.is_like,sy)" class="dz">
                <van-icon :color="sj.is_like ? 'red' : '#999'" name="good-job" />{{sj.like_count>0 ? sj.like_count:''}}
               </div>
            </div>
        </div>
  </div>
</template>

<script>
import { timeForm } from "@/gj/timeform.js";
export default {
props:{
    dx:{
        type:Array,
        default:()=>{
            return []
        }
    },
    hfyc:{
        default:false
    }
},
methods:{
    dj(comment_id,is_like,sy){
        // let bj=this.bj
        this.$emit('dj',{comment_id,is_like,sy})
        // if(this.DjsFdlyz()===false){
        //    return
        // }
        // let { dx: { is_like }, article_id, user_id } = this
        // let api = is_like ? renplqxdz : renpldz
        // console.log(this.$parent)            //拿到父组件所以数据$parent
        // api({
        //     user_id, article_id
        // }).then(res => {
        //     // this.$toast(res.msg)
        //     console.log(res)
        //     if (res.code == 0) {
        //         this.$parent.dx.is_like = !is_like
        //     }
        // })
        
    },
    djhf(sj,sy){
        //$emit()子传父的方法 因为只能传一个 所以把索引加的 sj 里面 先把 sj（数据） 先展开然后把索引加里面 父组件 组件解构赋值 就能用或打点访问
        this.$emit('djhf',{sj:{sy,...sj}})

    }
}
}
</script>

<style scoped>
.bk{
    /* border-bottom: 1px solid rgb(220,220,220);
    padding: 0 0 10px 0; */
    margin: 10px 0 20px 0;
}
.tp{
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin: 0 10px 0 0;
}
.fud{
    display: flex;
    margin: 0 5px 10px 5px;
}
.reqly{
    border: 1px solid rgb(220,220,220);
    border-radius: 20px;
    padding: 2px 7px 2px 3px;
    margin: 0 0 0 10px;
}
.active{
    color: red;
}
.dz{
    margin: 5px 0 0 50px;
}
.nr{
    width: 200px !important;
    font-size: 13px;
    margin: 5px 0;
}
.act{
    transition: all 3s;
   animation: dhmz 5s ease;
   
}
@keyframes dhmz {
    0%{
        opacity: 0;
        transform: translateY(20px);
        background: red;
    }
    50%{
        opacity: .5;
       transform: translateY(50px);
       background: blue;   
    }
    100%{
        opacity: 1;
        transform: translateY(0);
        background: none;
    }
}
</style>